<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>02_模板语法</title>
  </head>
  <body>
    <!--
      1. 模板的理解:
        动态的html页面
        包含了一些JS语法代码
          双大括号表达式
          指令(以v-开头的自定义标签属性)
      2. 双大括号表达式
        语法: {{exp}} 或 {{{exp}}}
        功能: 向页面输出数据
        可以调用对象的方法
      3. 指令一: 强制数据绑定
        功能: 指定变化的属性值
        完整写法:
          v-bind:xxx='yyy'  //yyy会作为表达式解析执行
        简洁写法:
          :xxx='yyy'
      4. 指令二: 绑定事件监听
        功能: 绑定指定事件名的回调函数
        完整写法:
          v-on:click='xxx'
        简洁写法:
          @click='xxx'
      -->
    <div id="app">
      <h1>{{username}}</h1>
      <input type="text" :value="msg" />
      <input type="text" v-model="age" />
      <p>
        <h2 @mousemove="handleMouseMove">{{msg}}</h2>
      </p>
      <button @click="handleClick">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          username: '李四',
          age: 20,
          msg:'牛啊牛啊'
        },
        methods: {
          handleClick(e) {
            console.log(e)
            console.log(this)
            this.age++
          },
          handleMouseMove(){
            console.log(this.msg)
          }
        },
      })
    </script>


  </body>
</html>
